﻿/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       2-col-left-layout.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    The holy grail layouts mean that you have SEO friendly content highest in the markup 
            when using a multi column layout in mojoPortal and they provide graceful degradation for non-js users. 
            They are based on the percentage layouts at http://matthewjamestaylor.com/blog/perfect-3-column.htm, 
            but dont use the gutters to avoid float bugs in old IE as is done there. 
    
            The alternative is to leave everything on a straightforward division of 100% 
            (the maths is easier when you wnat to change the proportions!) and to use 
            floating and clearing on .ie classes to control the float bugs -
            harder work in the shorterm but much easier in the long.
    
            The sheet follows the structure of a base/no-js layout for graceful degradation followed 
            by media queries - alter widths as appropriate to you, ie will pick these up if 
            you have respond.js included in the layout.master. The media queries contain the basic hg col setups 
            for smart browsers, a buch of responsive rules for the mojoPortal admin pages and the 
            float/clear fixes for float bugs ie.
    
            The cascade is everything!
    


*/

/* --------------------------------------------   2-col-left-layout.css ------------------------------------------- */	

/*hide the right column in the mojoPortal admin add content pages to 
    prevent users form adding content...*/

        .pagelayout .layoutright { display: none }
        
        /*...or just warn them instead...*/

	/*  .pagelayout .layoutright { 
            
            font-weight: normal; border: 1px solid; padding: 0.75em; 
           
            -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 
           
            -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset; 
            -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset; 
            box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset; 
            
            border-color: #ccc; 
            
        }

        .pagelayout .layoutright:after {  content: "content in this panel not visible"; color: red; text-align: center }*/	
    



/* -----------------------------------------------   holy grail col setup ------------------------------------------ */	
	
/*.... the hidden column*/ 
  
    .col3 {display:none} 
    

    
/* ---------------------------------------------------   no-js/ie ------------------------------------------------- */



    .altcontent1 {width: 100%}    
    .col1 {float:right; width: 67%}
    .col2 {float:left; width: 33%;}
    .altcontent2 {width: 100%}   
 
	
  
  
   
/* --------------------------------------------------  media queries ---------------------------------------------- */     
  



/* MOBILE */
@media only screen and (min-width: 0px) {  
	
    .altcontent1 {width: 100%}    
    .col1 {float:left; width: 100%}
    .col2 {float:left; width: 100%;}
    .altcontent2 {width: 100%}     
         

}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
    

/* ------------------------------------------------  2 columns left @ 480px ---------------------------------------- */	

    .colleft {right:67%;}
    
    .col1    {width:67%;   left:100%;}
    .col2    {width:33%; }
    .col3    {display:none}

    .ie7 .col2, .ie6 .col2  {clear:right}
    
    .administration .col1,
    .htmledit .col1,
    .memberlist .col1
    
    /* show left column in user pages...
     .loginpage .col1 ,
    .passwordrecovery .col1,
    .registerpage .col1,
    .userprofile .col1*/
    
    {left:67%;width: 100%}

   
}



/* SMALL TABLET */
@media only screen and (min-width: 600px) {

}


/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
    
    
/* -----------------------------------------  2 columns left @ 768px --------------------------------------------- */


    .colleft {right:75%;}
    
    .col1    {width:75%;  left:100%;}
    .col2    {width:25%; }
    .col3    {display:none}
    
    .administration .col1 ,
    .htmledit .col1,
    .memberlist .col1
    
     /* show left column in user pages...
    .loginpage .col1 ,
    .passwordrecovery .col1,
    .registerpage .col1,
    .userprofile .col1 */
     {left:75%;width: 100%}   
  

}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
	
}


/* DESKTOP */
@media only screen and (min-width: 1280px) { 	

}

/* WIDESCREEN */
/* Increased body size for legibility */
@media only screen and (min-width: 1400px) { 
	
}